<template>
	<view class="search" @click="selectIsXiala">
		<!-- 生产公司 -->
	    <view class="inventory">
			<view class="inputTittle">生产公司:</view>
			<input type="text"  placeholder="必填" v-model="inputText.companyName" class="inputt" placeholder-class="inputt">
	    </view>
		<view class="name">
			<view class="inputTittle">产品名称:</view>
			<input type="text" placeholder="必填" v-model="inputText.productName" class="inputt" placeholder-class="inputt">
		</view>
		<view class="quantity">
			<view class="inputTittle">库存数:</view>
		  <input type="text" placeholder="必填" v-model="inputText.countNumber" class="inputt" placeholder-class="inputt">
		</view>
		
		<view class="manufacturer">
			<view class="inputTittle">厂商:</view>
		  <input type="text" placeholder="必填" v-model="inputText.manufacturer" class="inputt" placeholder-class="inputt">
		</view>
		<view class="producer">
			<view class="inputTittle">产品产地:</view>
			<input type="text" placeholder="必填" v-model="inputText.productFrom" class="inputt" placeholder-class="inputt">
		</view>
		<view class="producer">
			<view class="inputTittle">单价:</view>
			<input type="text" placeholder="必填" v-model="inputText.unitPrice" class="inputt" placeholder-class="inputt">
		</view>
		<view class="manufacturer">
			<view class="inputTittle">保质期:</view>
		  <input type="text" placeholder="7天或12个月" v-model="inputText.guaranteePeriod" class="inputt" placeholder-class="inputt">
		</view>
		<view class="serial">
			<view class="inputTittle">序列号:</view>
		  <input type="text" placeholder="选填" v-model="inputText.serialNumber" class="inputt" placeholder-class="inputt">
		</view>
		<view class="code">
			<view class="inputTittle">产品编码:</view>
			<input type="text" placeholder="选填" v-model="inputText.productCode"  class="inputt" placeholder-class="inputt">
		</view>
		
		<view class="number">
			<view class="inputTittle">批次号:</view>
			<input type="text" placeholder="选填" v-model="inputText.batchNumber" class="inputt" placeholder-class="inputt">
		</view>
		<view class="content">
			<view class="xuanze" @click.stop="selectIsXiala0">
				<text>支持配送类型</text>
				<input type="text" placeholder="选择" v-model="inputText.supportSend" placeholder-class="inputt1" style="text-align: center;margin-left: -30rpx;">
				<view class="xiala" v-if="isXiala0==1">
					<view class="xiala-xuan" :class="[isXiala0==1?'open':isXiala0==2?'close':'']">
						<view class="xiala-hang" v-for="(item,index) in option" :key="index" @click="xuanzeMoban(item.id,item.devliverType)">
							<text>{{item.devliverType}}</text>
						</view>					
					</view>
				</view>
			</view>
		</view>
		<view class="content1">
			<view class="xuanze1" @click.stop="selectIsXiala1">
				<text>单位</text>
				<input type="text" placeholder="选择" v-model="inputText.unit" placeholder-class="inputt1" style="text-align: center;">
				<view class="xiala1" v-if="isXiala1==1">
					<view class="xiala-xuan1" :class="[isXiala1==1?'open':isXiala1==2?'close':'']">
						<view class="xiala-hang1" v-for="(item,index) in option1" :key="index" @click="xuanzeMoban1(item.id,item.unitName)">
							<text>{{item.unitName}}</text>
						</view>					
					</view>
				</view>
			</view>
		</view>
		<view class="content2">
			<view class="xuanze2" @click.stop="selectIsXiala2">
				<text>产品分类</text>
				<input type="text" placeholder="选择" v-model="inputText.productType" placeholder-class="inputt1" style="text-align: center;">
				<view class="xiala2" v-if="isXiala2">
					<view class="xiala-xuan2" :class="[isXiala2==1?'open':isXiala2==2?'close':'']">
						<view class="xiala-hang2"  v-for="(item,index) in option2" :key="index" @click="xuanzeMoban2(item.id,item.typeName)">
							<text>{{item.typeName}}</text>
						</view>					
					</view>
				</view>
			</view>
		</view>
		<view class="date">
			<view class="inputTittle">产品生产日期:</view>
			<view class="inputt">
				<picker mode="date" @change="onDateChange" :value="DateValue">
				    <view  style="padding-left: 186rpx;color: #7c7c7c;">{{DateValue}}</view>
				</picker>
			</view>
			
			<!-- <input type="text" placeholder="(必填)" v-model="inputText.productCreateDate" class="inputt" placeholder-class="inputt"> -->
		</view>
		<view class="cu-form-group" style="border-top: 20rpx solid #eee;">
		<!-- 图片上传 -->
		<view class="cu-form-group" style="border-top: 20rpx solid #eee;">
			<view class="action"></view>
			<view class="action">{{imgList.length}} / 6</view>
		</view>
		<view class="cu-form-group" style="border-top: 0rpx solid #eee;">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" :data-url="imgList[index]">
					<image :src=item  mode="aspectFill" style="width: 50px;height: 50px;"></image>
					<view class="cu-tag bg-red"  @tap.stop="delImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImage" v-if="imgList.length < count">
					<text class='cuIcon-cameraadd'>点击上传图片</text>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="button">
			<view class="grounding" @click="submitto">
				<p>立即上架</p>
			</view>
		</view>
	</view>
</view>
</template>


<script>
	import { mapState } from 'vuex';
	import { queryAlls,queryAllProductTypesr,querySaleInfoByStId,queryAllr,saveProduct } from '@/api/new.js'
	
	export default {
		data() {
			return {
				queryAll:[],
				queryAll:[],
				title: 'Hello',
				isXiala0:2,
				option:[],
				productCategory:"选择",
				title: 'Hello',
				isXiala1:2,
				option1:[],
				unit:"选择",
				DateValue: "请选择日期",
				
				title: 'Hello',
				isXiala2:2,
				option2:[],
				productType:"选择",
				inputText:{
					companyName:'',
					productCode:'',
					productName:'',
					batchNumber:'',
					serialNumber:'',
					countNumber:'',
					manufacturer:'',
					productFrom:'',
					unitPrice:'',
					productCreateDate:'',
					productCategory:'',
					unit:'',
					storeId: '' ,
					productType:'',
					guaranteePeriod:'',
					dtPic1:'',
					dtPic2:'',
					dtPic3:'',
					dtPic4:'',
					dtPic5:'',
					dtPic6:'',
					saleStatus:1
					
				},
				//图片总允许上传数目
				count: 6,
				//存储服务器返回的文件名称
				imgList: [],
				//存储选择的本地图片文件路径列表
				tempImgList: [],
				//服务器图片资源获取接口
				baseUrl: 'http://www.yuebi.online/YBSsm2/exFunction/uploadImage.do',				
				
			}
		},
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		onLoad() {
 
		},
		methods: {
			onDateChange(e) {
			    this.DateValue = e.detail.value;
				this.inputText.productCreateDate = e.detail.value + ' 00:00:00'
			},
			submitto(){
				var data = this.inputText
				data.storeId = this.userInfo.storeId
				data.dtPic1 = this.imgList[0]
				data.dtPic2 = this.imgList[1]?this.imgList[1]:''
				data.dtPic3 = this.imgList[2]?this.imgList[2]:''
				data.dtPic4 = this.imgList[3]?this.imgList[3]:''
				data.dtPic5 = this.imgList[4]?this.imgList[4]:''
				data.dtPic6 = this.imgList[5]?this.imgList[5]:''
				
				saveProduct(data).then(res => {
					if(res.data.code==200){
						uni.showToast({
							title: '上架成功',
							icon:"none"
						})
						uni.navigateTo({
							url:"/pages/product/index"
						})
					}else{
						uni.showToast({
							title: res.error,
							icon:"none"
						})
					}
					
				})
			},
			selectIsXiala(){
				this.isXiala0=2
				this.isXiala1=2
				this.isXiala2=2
			},
			selectIsXiala0(){
				if(this.isXiala0==1){
					this.isXiala0=2
				}else if(this.isXiala0==2){
					this.isXiala0=1
				}
			},
			xuanzeMoban(label,value){
				if(!this.inputText.supportSend){
					this.inputText.supportSend = value
				}else{
					if(this.inputText.supportSend.indexOf(value) == -1){
						this.inputText.supportSend += ','+value
					}else{
						for(var i = 0; i<this.inputText.supportSend.split(",").length; i++){
							var num = this.inputText.supportSend.split(",")
							if(value==num[i]){
								num.splice(i, 1)
								this.inputText.supportSend = num.toString()
							}
						}
					}
				}
			},
			
			selectIsXiala1(){
				if(this.isXiala1==1){
					this.isXiala1=2
				}else if(this.isXiala1==2){
					this.isXiala1=1
				}
			},
			xuanzeMoban1(label,value){
				this.inputText.unit=value
			},
			selectIsXiala2(){
				if(this.isXiala2==1){
					this.isXiala2=2
				}else if(this.isXiala2==2){
					this.isXiala2=1
				}
			},
			xuanzeMoban2(label,value){
				this.inputText.productType=value
			},
			/**
						 * 上传图片到服务器
						 */
						uploadImg(){
							uni.uploadFile({
								url: 'https://www.yuebi.online/exFunction/uploadImgFile', //真实的接口地址
								//每次保存最新的图片到服务器
								filePath: this.tempImgList[this.tempImgList.length-1],
								name: 'file',
								// header: {
								// 	'content-type': 'multipart/form-data',
								// 	'X-Access-Token': uni.getStorageSync('Access-Token')
								// },
								success: (uploadFileRes) => {
									let ress = JSON.parse(uploadFileRes.data)
									//将服务器返回的文件名进行存储，存储到记录对象中，使能从服务器获取图片资源
									this.imgList.push(ress.fileUrl);
								}
							});
						},
						/**
						 * 选择图片上传
						 */
						chooseImage() {
							uni.chooseImage({
								count: 1, //单词最多允许选中，默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: (res) => {
									// 获取到图片的本地文件路径列表，存储到临时列表tempImgList中
									if (this.tempImgList.length != 0) {
										this.tempImgList = this.tempImgList.concat(res.tempFilePaths)
									} else {
										this.tempImgList = res.tempFilePaths
									}
									
									let index = this.tempImgList[0].indexOf("blob:")
									let result = this.tempImgList[0].substr(index + 1,this.tempImgList[0].length)
									this.uploadImg()
								}
							});
						},
						/**
						 * 预览图片 urls所有的url地址，current选中的url地址
						 * @param {Object} e 
						 */
						viewImage(e) {
							uni.previewImage({
								urls: this.imgList,
								current: e.currentTarget.dataset.url
							});
						},
						/**
						 * 删除图片
						 * @param {Object} e
						 */
						delImg(e) {
							uni.showModal({
								title: '',
								content: '确定要删除第'+(e.currentTarget.dataset.index+1)+'张图片吗？',
								cancelText: '再看看',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										this.imgList.splice(e.currentTarget.dataset.index, 1)
									}
								}
							})
						},
		},
		mounted () {
			let data = {}
			queryAlls(data).then(res => {
				this.option1 = res.data.data
			})
			queryAllProductTypesr(data).then(res => {
				this.option2 = res.data.data
				
			})
			queryAllr(data).then(res => {
				this.option = res.data.data
			})
			let data1 = {
				id:1
			}
			querySaleInfoByStId(data1).then(res => {
				console.log(res,'555555555')
				
			})
		},
	}

</script>

<style scoped>
	/* 生产公司样式 */
.search{
	background: #fff;
}
.inputt{
	float: left;
	color: #353535;
	line-height: 40px;
	height: 40px;
	text-align: right;
	margin-left: 10px;
	padding-right: 10px;
}
.inputt1{
	float: left;
	color: #353535;
	line-height: 40px;
	height: 40px;
}
.inputTittle{
	float: left;
	font-size: 16px;
	margin: 0;
	height: 40px;
	width: 30%;
	line-height: 40px;	
	padding-left: 10px;
}
.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
.search .inventory{
	background: #F4F8FE;
	width: 100%;
	height: 40px;
}

/* 产品分类样式 */
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		background: #F4F8FE;
	}
.xuanze{
		
		width: 100%;
		height: 80rpx;
		border-radius: 20rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.xuanze text{
		color: #000;
 
	}
	.xiala{
		position: absolute;
		bottom: -240rpx;
		left: 0;
		height: 230rpx;
		width: 100%;
		z-index: 11;
	}
	.xiala-xuan{
		height: 230rpx;
		background: #fff;
		box-sizing: border-box;
		overflow: hidden;
	}
	.xiala-hang{
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		border-bottom: 1px solid #9f9f9f;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.xiala-hang:last-child{
		border: 0px;
	}
	    /* 显示或关闭动画*/
	    .open {
	        animation: slideContentUp 0.3s linear both;
	    }
	 
	    .close {
	        animation: slideContentDown 0.3s linear both;
	    }
	 
	    /* 动态设置高度 */
	    @keyframes slideContentUp {
	        from {
	            height: 0;
	        }
	 
	        to {
	            height: -230rpx;
	        }
	    }
	 
	    @keyframes slideContentDown {
	        from {
	            height: -230rpx;
	        }
	 
	        to {
	            height: 0;
	        }
	    }


/* 产品编码 */
.code {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}
/* 产品名称 */
.name {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}

/* 批次号 */
.number {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}

/* 序列号 */
.serial {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}

/* 库存数 */
.quantity {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}
/* unit单位 */
.content1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		background: #F4F8FE;
	}
.xuanze1{
		
		width: 100%;
		height: 80rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.xuanze1 text{
	color: #000;
 
	}
	.xiala1{
		position: absolute;
		bottom: -240rpx;
		left: 0;
		height: 230rpx;
		width: 100%;
		z-index: 92;
	}
	.xiala-xuan1{
		/* height: 230rpx; */
		width: 100%;
		background: #F4F8FE;
		box-sizing: border-box;
	}
	.xiala-hang1{
		height: 50rpx;
		width: 100%;
		border-bottom: 1rpx solid #e3e3e3;
		display: flex;
		z-index: 22;
		align-items: center;
		justify-content: center;
	}
	.xiala-hang1:last-child{
		border: 0px;
	}
	 

/* 厂商 */
.manufacturer {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}

/* 产品类型 */
.content2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		background: #F4F8FE;
	}
.xuanze2{
		width: 100%;
		height: 80rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.xuanze2 text{
		color: #000;
 
	}
	.xiala2{
		position: absolute;
		bottom: -240rpx;
		left: 0;
		/* height: 230rpx; */
		width: 100%;
		z-index: 3;
	}
	.xiala-xuan2{
		/* height: 230rpx; */
		width: 100%;
		background: #F4F8FE;
		box-sizing: border-box;
		overflow: hidden;
	}
	.xiala-hang2{
		height: 50rpx;
		width: 100%;
		border-bottom: 1rpx solid #e3e3e3;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.xiala-hang2:last-child{
		border: 0px;
	}

/* 产品产地 */
.producer {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}
/* 产品生产日期 */
.date {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}
/* 提交按钮 */
.button{
	width: 100%;
	height: 40px;
	background: #F4F8FE;
	position: absolute;
	width: 100%;
	/* bottom: -65px; */
	height: 55px;
}
.grounding{
	width: 150px;
	height: 40px;
	background: #69C0FF;
	line-height: 40px;
	margin-top: 6px;
	margin-left: 28%;
	border-radius: 15%;
}
.grounding{
	text-align: center;
}

.cuIcon-cameraadd[data-v-5b522133] {
    color: #EEE5DE;
    margin-left: 32%;
    font-size: 22px;
}
.action{
	color: #EEE5DE;
	margin-left: 40%;
	font-size: 22px;
}
.uni-image {
    width: 100px;
    height: 100px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}
</style>
